<template>
  <div class="item">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-button type="primary" @click="dialogVisible = true">+新建</el-button>
          <el-button v-if="arr.length === 0" type="info" plain>-删除</el-button>
          <el-button v-else type="primary" @click="duoxuanshanchu">-删除</el-button>
          <el-button type="primary" @click="shuaxin">刷新</el-button>
        </div>
      </el-col>
    </el-row>
    <el-col :span="24" style="margin-top: 20px;padding-bottom: 20px;">
      <div class="grid-content bg-purple-dark">
        <el-col :span="5" class="sousuo">
          <el-input v-model="input" placeholder="仓库编号或名称" />
        </el-col>
        <el-button type="primary" @click="chaxun()">查询</el-button>
        <el-button type="info" plain @click="chongzhi">重置</el-button>
      </div>
    </el-col>
    <el-table ref="multipleTable" border :data="list" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="Code" label="仓库编号" width="80" />
      <el-table-column prop="Name" label="仓库名称" width="100" />
      <el-table-column prop="Type" label="仓库类型" width="100">
        <template slot-scope="scope">{{ scope.row.Type == "Plane" ? '平面仓库' : '立体仓库' }}</template>
      </el-table-column>
      <el-table-column prop="IsTray" label="托盘管理" width="100">
        <template slot-scope="scope"><div :class="[scope.row.IsTray == true ? 'QiYong' : 'TingYong']">{{ scope.row.IsTray == true ? '是' : '否' }}</div></template>
      </el-table-column>
      <el-table-column prop="" label="托盘分区" width="120">
        <template slot-scope="scope"><div :class="[scope.row.IsZone == true ? 'QiYong' : 'TingYong']">{{ scope.row.IsZone == true ? '是' : '否' }}</div></template>
      </el-table-column>
      <el-table-column prop="Disable" label="仓库状态" width="120">
        <template slot-scope="scope"><div :class="[scope.row.Disable == true ? 'QiYongs' : 'TingYongs']">{{ scope.row.Disable == true ? '启用' : '停用' }}</div></template>
      </el-table-column>
      <el-table-column prop="" label="默认仓库" width="120">
        <template slot-scope="scope"><div :class="[scope.row.IsDefault == true ? 'QiYong' : 'TingYong']">{{ scope.row.IsDefault == true ? '是' : '否' }}</div></template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="shezhiXd(scope.row)">设置巷道</el-button>
          <el-button type="text" @click="shezhiHJ(scope.row)">设置货架</el-button>
          <el-button type="text" @click="HNPeiZhi(scope.row)">配置</el-button>
          <el-button type="text" @click="HNBianJi(scope.row)">编辑</el-button>
          <el-button type="text" @click="HNShanChu(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增仓库组件 -->
    <el-dialog title="新增仓库" :visible.sync="dialogVisible" width="30%">
      <el-form
        ref="formLabelAlign"
        :model="formLabelAlign"
        :rules="rules"
        :label-position="labelPosition"
        label-width="80px"
      >
        <el-form-item label="仓库编号">
          <el-input placeholder="系统自动生成" :disabled="true" />
        </el-form-item>
        <el-form-item label="仓库名称" prop="name">
          <el-input v-model="formLabelAlign.name" />
        </el-form-item>
        <el-form-item label="仓库类型" prop="cangku">
          <el-select v-model="formLabelAlign.cangku" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formLabelAlign.type" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="queding">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 巷道设置组件 -->
    <el-drawer
      title="巷道设置"
      :visible.sync="drawer"
      size="50%"
    >
      <div style="margin-left: 40px;">
        <el-button type="primary" @click="addXd">+新建</el-button>
        <el-button v-if="arr_xd.length === 0" type="info" plain>-删除</el-button>
        <el-button v-else type="primary" @click="shanchuXD">-删除</el-button>
        <el-button type="primary">刷新</el-button>
        <el-col :span="24" style="margin-top: 20px;padding-bottom: 20px;">
          <div class="grid-content bg-purple-dark">
            <el-col :span="8" class="sousuo">
              <el-input v-model="XDchaxun.Keyword" placeholder="编号/名称" />
            </el-col>
            <el-button type="primary" @click="includXD">查询</el-button>
            <el-button type="info" plain @click="shuaxinXD">重置</el-button>
          </div>
        </el-col>
        <el-table ref="multipleTable" border :data="arrlist" tooltip-effect="dark" style="width: 100%" @selection-change="handXiangdao">
          <el-table-column type="selection" />
          <el-table-column prop="PB_Storage.Name" label="所属仓库" />
          <el-table-column prop="Code" label="巷道编号" />
          <el-table-column prop="Name" label="巷道名称" />
          <el-table-column prop="" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="XDhangneiBJ(scope.row)">编辑</el-button>
              <el-button type="text" @click="XDhangneiSC(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
    <!-- 添加巷道组件 -->
    <el-dialog title="新增巷道" :visible.sync="xinzengXd" width="30%">
      <el-form
        ref="labelXD"
        :model="labelXD"
        :rules="ruless"
        label-width="80px"
      >
        <el-form-item label="仓库编号">
          <el-input placeholder="系统自动生成" :disabled="true" />
        </el-form-item>
        <el-form-item label="巷道名称" prop="name">
          <el-input v-model="labelXD.name" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="xinzengXd = false">取 消</el-button>
        <el-button @click="ddXDqd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 巷道编辑 -->
    <el-dialog title="巷道编辑" :visible.sync="xinzengXd_bianji" width="30%">
      <el-form
        ref="labelXD"
        :model="listXD"
        :rules="ruless"
        label-width="80px"
      >
        <el-form-item label="仓库编号">
          <el-input v-model="listXD.Code" placeholder="系统自动生成" :disabled="true" />
        </el-form-item>
        <el-form-item label="巷道名称" prop="name">
          <el-input v-model="listXD.Name" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="xinzengXd_bianji = false">取 消</el-button>
        <el-button @click="bianjiXD">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 设置货架 -->
    <el-drawer
      title="货架设置"
      :visible.sync="HJshezhi"
      size="50%"
    >
      <div style="margin-left: 40px;">
        <el-button type="primary" @click="XJhuojia = true">+新建</el-button>
        <el-button v-if="HJdata.id.length === 0" type="info" plain>-删除</el-button>
        <el-button v-else type="primary" @click="shanchuHJ">-删除</el-button>
        <el-button type="primary" @click="gethuojialist">刷新</el-button>
        <el-col :span="24" style="margin-top: 20px;padding-bottom: 20px;">
          <div class="grid-content bg-purple-dark">
            <el-col :span="8" class="sousuo">
              <el-input v-model="HJchaxun.Name" placeholder="编码/名称" />
            </el-col>
            <el-button type="primary" @click="chaxunHJ">查询</el-button>
            <el-button type="info" plain>重置</el-button>
          </div>
        </el-col>
        <el-table ref="multipleTable" border :data="HJlist" tooltip-effect="dark" style="width: 100%" @selection-change="handHuojia">
          <el-table-column type="selection" />
          <el-table-column prop="PB_Storage.Name" label="仓库" />
          <el-table-column prop="Code" label="货架编号" />
          <el-table-column prop="Name" label="货架名称" />
          <el-table-column prop="" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="HJbianji(scope.row)">编辑</el-button>
              <el-button type="text" @click="HJshanchu(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
    <!-- 添加货架组件 -->
    <el-dialog title="新增货架" :visible.sync="XJhuojia" width="30%">
      <el-form
        ref="labelHJ"
        :model="labelHJ"
        :rules="ruless"
        label-width="80px"
      >
        <el-form-item label="货架编号">
          <el-input placeholder="系统自动生成" :disabled="true" />
        </el-form-item>
        <el-form-item label="货架名称" prop="name">
          <el-input v-model="labelHJ.Name" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="XJhuojia = false">取 消</el-button>
        <el-button @click="QDxinjianHJ">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 货架编辑 -->
    <el-dialog title="货架编辑" :visible.sync="xinzengHJ_bianji" width="30%">
      <el-form
        ref="labelXD"
        :model="listXD"
        :rules="ruless"
        label-width="80px"
      >
        <el-form-item label="货架编号">
          <el-input v-model="HJarr.Code" placeholder="系统自动生成" :disabled="true" />
        </el-form-item>
        <el-form-item label="货架名称" prop="name">
          <el-input v-model="HJarr.Name" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="xinzengXd = false">取 消</el-button>
        <el-button @click="bianjiHJ">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 配置 -->
    <el-dialog title="配置" :visible.sync="PeiZhi_ZJ" width="30%">
      <el-form
        ref="BJlist"
        :model="BJlist"
        :rules="rules_BJ"
        label-width="100px"
      >
        <el-form-item label="托盘管理:">
          <el-radio-group v-model="BJlist.IsTray" size="small">
            <el-radio-button label="true">启用</el-radio-button>
            <el-radio-button label="false">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分区管理:">
          <el-radio-group v-model="BJlist.IsZone" size="small">
            <el-radio-button label="true">启用</el-radio-button>
            <el-radio-button :label="false">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="仓库状态:">
          <el-radio-group v-model="BJlist.Disable" size="small">
            <el-radio-button label="true">启用</el-radio-button>
            <el-radio-button label="false">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="默认仓库:">
          <el-radio-group v-model="BJlist.IsDefault" size="small">
            <el-radio-button label="true">启用</el-radio-button>
            <el-radio-button label="false">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="PeiZhi_ZJ = false">取 消</el-button>
        <el-button type="primary" @click="QDPeiZhi">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="BianJi_ZJ" width="30%">
      <el-form
        ref="BJlist"
        :model="BJlist"
        :rules="rules_BJ"
        label-width="80px"
      >
        <el-form-item label="仓库编号">
          <el-input v-model="BJlist.Code" placeholder="系统自动生成" :disabled="true" />
        </el-form-item>
        <el-form-item label="仓库名称" prop="Name">
          <el-input v-model="BJlist.Name" />
        </el-form-item>
        <el-form-item label="活动区域" prop="Type">
          <el-select v-model="BJlist.Type" placeholder="请选择活动区域">
            <el-option label="平面仓库" value="Plane" />
            <el-option label="立体仓库" value="Frame" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="BJlist.Remarks" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="BianJi_ZJ = false">取 消</el-button>
        <el-button @click="QDbianji">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getCangku, addCangku, delCangku, getXiangdao, addXiangdao, delxiangdao, getXiangdaoInfo, getHuoJia, addHuoJia, delHuoJia, getHuoJiaInfo, getbianji, addBianjiInfo, getXi } from '@/api/user.js'

export default {
  name: 'Repository',
  data() {
    return {
      list: [], // 仓库列表
      HJlist: [], // 货架列表
      arr: [], //  被选中仓库id
      hangneishanch: [], // 行内删除
      arr_xd: [], // 被选中的巷道
      XD_id: [], // 巷道id
      listXD: {},
      arrlist: [], // 所有巷道列表
      BJlist: {},
      HJarr: [],
      HJdata: {
        HJ_id: [], // 货架id
        id: [] // 被选中货架id
      },
      HJchaxun: {
        Name: '',
        HJ_id: ''
      },
      drawer: false, // 控制巷道组件打开
      xinzengXd: false, // 控制新增巷道组件打开
      xinzengXd_bianji: false, // 控制巷道编辑显示
      HJshezhi: false, // 控制货架设置显示
      XJhuojia: false, // 控制新建货架组件
      xinzengHJ_bianji: false, // 控制编辑货架组件
      input: '', // 仓库搜索框
      BianJi_ZJ: false, // 控制行内编辑组件
      PeiZhi_ZJ: false, // 控制行内配置组件
      dialogVisible: false, // 控制添加仓库组件
      labelPosition: 'right',
      XDchaxun: { // 巷道输入框输入内容
        Keyword: '',
        StorId: ''
      },
      BianJi: {
        id: ''
      },
      labelXD: { // 新建巷道
        name: '',
        StorId: ''
      },
      labelHJ: { // 新建货架
        Name: '',
        StorId: ''
      },
      formLabelAlign: { // 新建仓库需要的数据
        name: '',
        type: '',
        cangku: ''
      },
      options: [
        {
          value: 'Plane',
          label: '平面仓库'
        },
        {
          value: 'Frame',
          label: '立体仓库'
        }
      ],
      rules: {
        name: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' }
        ],
        cangku: [
          { required: true, message: '请选择仓库类型', trigger: 'change' }
        ]
      },
      ruless: {
        name: [
          { required: true, message: '请输入巷道名称', trigger: 'blur' }
        ]
      },
      rules_BJ: {
        Name: [
          { required: true, message: '仓库名称不能为空', trigger: 'blur' }
        ],
        Type: [
          { required: true, message: '请选择仓库类型', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() { // 获取全部仓库
      const res = await getCangku()
      this.list = res
      console.log(res)
    },
    // 仓库
    queding() { // 确定新增仓库
      this.$refs.formLabelAlign.validate((valid) => {
        if (valid) {
          this.tianjia()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    shuaxin() { // 仓库刷新
      this.getList()
    },
    async tianjia() { // 调用新增仓库接口
      this.dialogVisible = false
      await addCangku(this.formLabelAlign)
      // console.log(this.formLabelAlign)
      this.getList()
      this.dialogVisible = false
    },
    handleSelectionChange(val) { // 获取被选中仓库id
      this.multipleSelection = val
      console.log('val', val)
      if (val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          if (val[i].Id !== this.arr[i]) {
            this.arr.push(val[i].Id)
          }
        }
      } else {
        this.arr = val
      }
      console.log('arr', this.arr)
    },
    async shanchu() { // 调用删除仓库接口
      await delCangku(this.arr)
      this.getList()
    },
    duoxuanshanchu() { // 删除仓库
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.shanchu()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async chaxun() { // 查询仓库
      const res = await getCangku(this.input)
      this.list = res
    },
    chongzhi() { // 重置仓库查询输入框
      this.input = ''
    },

    // 巷道
    async shezhiXd(row) { // 打开巷道组件 获取巷道
      this.drawer = true
      this.XD_id = row.Id
      this.getquanbuXD()
    },
    async getquanbuXD() {
      const res = await getXiangdao(this.XD_id)
      this.arrlist = res
    },
    handXiangdao(val) { // 获取被选中巷道
      // this.multipleSelection = val
      console.log('val', val)
      if (val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          if (val[i].Id !== this.arr[i]) {
            this.arr_xd.push(val[i].Id)
          }
        }
      } else {
        this.arr_xd = val
      }
      console.log('arr_xd', this.arr_xd)
    },
    addXd() { // 展开添加巷道组件
      this.xinzengXd = true
    },
    async ddXDqd() { // 确定 上传巷道
      this.labelXD.StorId = this.XD_id
      await addXiangdao(this.labelXD)
      const res = await getXiangdao(this.XD_id)
      this.arrlist = res
      this.xinzengXd = false
    },
    shanchuXD() { // 删除巷道
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delxiangdao(this.arr_xd)
        const res = await getXiangdao(this.XD_id)
        this.arrlist = res
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 查询巷道
    async includXD() {
      this.XDchaxun.StorId = this.XD_id
      this.arrlist = await getXi(this.XDchaxun)
    },
    // 巷道重置
    async shuaxinXD() {
      this.XDchaxun.Keyword = ''
      const res = await getXiangdao(this.XD_id)
      this.arrlist = res
    },
    // 巷道行内删除
    async XDhangneiSC(row) {
      // console.log(row)
      this.arr_xd.push(row.Id)
      console.log('363', this.arr_xd)
      await delxiangdao(this.arr_xd)
      const res = await getXiangdao(this.XD_id)
      this.arrlist = res
    },
    // 巷道行内编辑
    async XDhangneiBJ(row) {
      const Id = row.Id
      this.BianJi.id = Id
      const res = await getXiangdaoInfo(this.BianJi)
      this.listXD = res
      console.log(this.listXD)
      this.xinzengXd_bianji = true
    }, // 确定巷道编辑
    async bianjiXD() {
      await addXiangdao(this.listXD)
      const res = await getXiangdao(this.XD_id)
      this.arrlist = res
      this.xinzengXd_bianji = false
    },

    // 设置货架
    async shezhiHJ(row) { // 设置货架
      console.log(row)
      this.HJdata.HJ_id = row.Id
      this.HJshezhi = true
      this.gethuojialist()
      console.log(this.HJlist)
    },
    // 获取货架（刷新）
    async gethuojialist() {
      this.HJlist = await getHuoJia(this.HJdata)
    },
    handHuojia(val) { // 获取被选中货架
      // this.multipleSelection = val
      console.log('val', val)
      if (val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          if (val[i].Id !== this.HJdata.id[i]) {
            this.HJdata.id.push(val[i].Id)
          }
        }
      } else {
        this.HJdata.id = val
      }
      console.log(' this.HJdata.id', this.HJdata.id)
    },
    // 确定新建货架
    async QDxinjianHJ() {
      this.labelHJ.StorId = this.HJdata.HJ_id
      console.log('labelHJ.id', this.labelHJ.id)
      await addHuoJia(this.labelHJ)
      this.gethuojialist()
      this.XJhuojia = false
    },
    async shanchuHJ() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delHuoJia(this.HJdata.id)
        this.gethuojialist()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 查询货架
    async chaxunHJ() {
      this.HJchaxun.HJ_id = this.HJdata.HJ_id
      this.HJlist = await getHuoJia(this.HJchaxun)
    },
    async HJbianji(row) { // 货架编辑
      console.log(row.Id)
      const res = await getHuoJiaInfo({ id: row.Id })
      this.HJarr = res
      this.xinzengHJ_bianji = true
    },
    async bianjiHJ() { // 确认货架编辑
      await addHuoJia(this.HJarr)
      this.gethuojialist()
      this.xinzengHJ_bianji = false
    },
    async HJshanchu(row) {
      const id = row.Id
      console.log(id)
      await delHuoJia([id])
      this.gethuojialist()
    },
    // 配置
    async HNPeiZhi(row) {
      console.log(row)
      const res = await getbianji({ id: row.Id })
      this.BJlist = res
      this.PeiZhi_ZJ = true
    },
    async QDPeiZhi() { // 确认配置
      await addBianjiInfo(this.BJlist)
      this.getList()
      this.PeiZhi_ZJ = false
    },
    // 编辑
    async HNBianJi(row) {
      const res = await getbianji({ id: row.Id })
      this.BJlist = res
      console.log(res)
      this.BianJi_ZJ = true
    },
    async QDbianji() { // 确认编辑
      await addBianjiInfo(this.BJlist)
      this.getList()
      this.BianJi_ZJ = false
    },
    async HNShanChu(row) {
      this.hangneishanch.push(row.Id)
      await delCangku(this.hangneishanch)
      this.getList()
    }
  }
}
</script>
<style scoped>
.item {
  margin-left: 50px;
  margin-top: 50px;
}
  .QiYong {
    width: 30px;
    border: 1px solid #52c41a;
    background-color: #f6ffed;
    text-align: center;
    border-radius: 7px;
    color: #52c41a;
  }
  .TingYong {
    width: 30px;
    text-align: center;
    border: 1px solid #f5222d;
    background-color: #fff1f0;
    border-radius: 7px;
    color: #f5222d;
  }
  .QiYongs {
    width: 40px;
    border: 1px solid #52c41a;
    background-color: #f6ffed;
    text-align: center;
    border-radius: 7px;
    color: #52c41a;
  }
  .TingYongs {
    width: 40px;
    text-align: center;
    border: 1px solid #f5222d;
    background-color: #fff1f0;
    border-radius: 7px;
    color: #f5222d;
  }

.sousuo {
  padding-right: 10px;
}
</style>

